<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search">
			<el-form-item label="关键词" prop="keyword">
				<el-input v-model="state.keyword" placeholder="请输入">
					<template #prepend>
						<el-select v-model="state.keyType" placeholder="请选择" style="width: 100px; min-width: 100px">
							<el-option label="标准编号" value="groupStandardNumber" />
							<el-option label="团体标准名称" value="groupStandardName" />
							<el-option label="发布单位" value="issuedUnit" />
						</el-select>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="state.queryForm.applyStatus" placeholder="" clearable>
					<el-option v-for="item in state.applyStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="search">查询</el-button>
				<el-button icon="RefreshRight" @click="reset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<!-- <el-space style="display: flex; justify-content: flex-end">
			<el-space>
				<el-button type="primary" @click="addOrUpdateHandle(true, {}, false)" >新增</el-button>
			</el-space>
			<el-space v-auth="'M008_4_Publish'">
				<el-button type="primary" @click="releaseHandle(true)" >发布</el-button>
			</el-space>
			<el-space v-auth="'M008_4_CancelPublish'">
				<el-button type="primary" @click="releaseHandle(false)" >取消发布</el-button>
			</el-space>
		</el-space> -->

		<el-form :inline="true" style="text-align: right" class="anniu">
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle(true, {}, false)">新增</el-button>
			</el-form-item>
			<el-form-item v-auth="'M008_4_Publish'">
				<el-button type="primary" @click="releaseHandle(true)">发布</el-button>
			</el-form-item>
			<el-form-item v-auth="'M008_4_CancelPublish'">
				<el-button type="primary" @click="releaseHandle(false)">取消发布</el-button>
			</el-form-item>
		</el-form>
		<el-table
			ref="shtableRef"
			v-loading="state.dataListLoading"
			:data="state.dataList"
			stripe
			class="layout-table"
			@selection-change="selectionChangeHandle"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column prop="groupStandardName" label="团体标准名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reportingLink" label="填报人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="projectName" label="工程名称" header-align="center" align="center"></el-table-column>
			<el-table-column prop="reportingUnit" label="填报单位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="linkTel" label="联系电话" header-align="center" align="center"></el-table-column>
			<el-table-column prop="editorUnits" label="主编单位" header-align="center" align="center">
				<template #default="{ row }">
					<el-tooltip :content="row.editorUnits" placement="top">
						<div class="multi-line-text">
							{{ row.editorUnits }}
						</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="issuedUnit" label="发布单位" header-align="center" align="center"></el-table-column>
			<el-table-column prop="releaseDate" label="发布日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="implementationDate" label="实施日期" header-align="center" align="center"></el-table-column>
			<el-table-column prop="applyStatusValue" label="状态" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="查看" style="cursor: pointer; margin: 0 6px" @click="addOrUpdateHandle(false, scope.row, true)">
						<View />
					</el-icon>
					<el-icon
						v-if="Number(scope.row.applyStatus) == 0 || Number(scope.row.applyStatus) == 5"
						:size="16"
						color="#1491FF"
						title="编辑"
						style="cursor: pointer; margin: 0 6px"
						@click="addOrUpdateHandle(false, scope.row, false)"
					>
						<Edit />
					</el-icon>

					<el-icon
						v-if="Number(scope.row.applyStatus) == 1"
						:size="16"
						color="#1491FF"
						title="通过"
						style="cursor: pointer; margin: 0 6px"
						@click="auditHandle(2, scope.row.id)"
					>
						<Check />
					</el-icon>
					<el-icon
						v-if="Number(scope.row.applyStatus) == 1"
						v-auth="'M008_4_NotPass'"
						:size="16"
						color="#1491FF"
						title="不通过"
						style="cursor: pointer; margin: 0 6px"
						@click="auditHandle(4, scope.row.id)"
					>
						<Close />
					</el-icon>
					<el-icon
						v-if="Number(scope.row.applyStatus) == 1"
						v-auth="'M008_4_Return'"
						:size="16"
						color="#1491FF"
						title="退回"
						style="cursor: pointer; margin: 0 6px"
						@click="auditHandle(5, scope.row.id)"
					>
						<Remove />
					</el-icon>

					<el-icon
						v-if="Number(scope.row.applyStatus) == 0 || Number(scope.row.applyStatus) == 5"
						:size="16"
						color="#fe6360"
						title="删除"
						style="cursor: pointer; margin: 0 6px"
						@click="deleteBatchHandle(scope.row.id)"
					>
						<Delete />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.queryForm.pageNum"
			:page-size="state.queryForm.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- 弹窗, 新增 / 修改 -->
		<addOrupdate ref="addOrUpdateRef" @refresh-data-list="getDataList"></addOrupdate>
	</el-card>
</template>
<script setup lang="ts">
import {
	groupStandardEIApApi,
	groupStandardEICanPuApi,
	groupStandardEIDelApi,
	groupStandardEIListApi,
	groupStandardEIPuApi,
	groupStandardStatusApi
} from '@/api/group/index'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

import addOrupdate from './components/inforCUpdate.vue'

const state = reactive({
	queryForm: {
		groupStandardName: '',
		groupStandardNumber: '',
		issuedUnit: '',
		startReleaseDate: '',
		endReleaseDate: '',
		applyStatus: '',
		pageNum: 1,
		pageSize: 10
	},
	total: 1,
	dataListLoading: false,
	dateRanges: '',
	applyStatusList: [],
	keyword: '',
	keyType: '',
	dataList: []
})

// const applyStatusList = [
//     {
//         value: 1,
//         label: '采集中'
//     },
//     {
//         value: 2,
//         label: '已提交'
//     },
//     {
//         value: 3,
//         label: '已退回'
//     },
//     {
//         value: 4,
//         label: '已发布'
//     },
//     {
//         value: 5,
//         label: '不通过'
//     },
// ]

const handleDateChange = () => {
	if (state.dateRanges) {
		state.queryForm.startReleaseDate = state.dateRanges[0] + ' 00:00:00'
		state.queryForm.endReleaseDate = state.dateRanges[1] + ' 00:00:00'
	} else {
		state.queryForm.startReleaseDate = ''
		state.queryForm.endReleaseDate = ''
	}
}

// 搜索关键词
const seearchText = () => {
	if (state.keyword && !state.keyType) {
		;('请选择搜索的关键字')
		return
	}
	if (state.keyType == 'groupStandardName') {
		state.queryForm.groupStandardName = state.keyword
		state.queryForm.groupStandardNumber = ''
		state.queryForm.issuedUnit = ''
	} else if (state.keyType == 'groupStandardNumber') {
		state.queryForm.groupStandardNumber = state.keyword
		state.queryForm.groupStandardName = ''
		state.queryForm.issuedUnit = ''
	} else if (state.keyType == 'issuedUnit') {
		state.queryForm.issuedUnit = state.keyword
		state.queryForm.groupStandardNumber = ''
		state.queryForm.groupStandardName = ''
	}
}

const getDataList = async () => {
	seearchText()
	state.dataListLoading = true
	await groupStandardEIListApi(state.queryForm).then(res => {
		state.dataListLoading = false
		state.dataList = res.data.list
		state.queryForm.pageNum = res.data.pageNum
		state.queryForm.pageSize = res.data.pageSize
		state.total = res.data.total
		// console.log(state.dataList)
	})
}
const search = () => {
	state.queryForm.pageNum = 1
	getDataList()
}
const reset = () => {
	state.dateRanges = ''
	state.keyType = ''
	state.keyword = ''

	state.queryForm.groupStandardName = ''
	state.queryForm.issuedUnit = ''
	state.queryForm.groupStandardNumber = ''
	state.queryForm.startReleaseDate = ''
	state.queryForm.endReleaseDate = ''
	state.queryForm.applyStatus = ''
	state.queryForm.pageSize = 10
	state.queryForm.pageNum = 1
	getDataList()
}
// 新增编辑、查看
const addOrUpdateRef = ref()
const addOrUpdateHandle = (isUpdate: Boolean, row: any, isChakan: Boolean) => {
	// if(isUpdate) {
	//     agreementText(isUpdate, row)
	// } else {
	//     addOrUpdateRef.value.init(isUpdate, row, isChakan)
	// }
	addOrUpdateRef.value.init(isUpdate, row, isChakan)
}

// 如果是新增弹出用户协议须知
const agreementText = (isUpdate: Boolean, row: any) => {
	ElMessageBox.confirm(
		'本企业自愿申请注册成为上海市工程建设标准信息系统的注册企业，并作出如下承诺：<br />一、本企业所提交的内容及其材料真实有效，并对信息真实性承担法律责任；<br />二、不利用平台发表色情低俗、暴力血腥、造谣散播等各类法律法规及相关政策规定的评议或意见；',
		'用户协议',
		{
			//   message: '',
			dangerouslyUseHTMLString: true,
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		}
	)
		.then(() => {
			addOrUpdateRef.value.init(isUpdate, row)
		})
		.catch(() => {})
}

// 删除
const deleteBatchHandle = (id: String | Number) => {
	ElMessageBox.confirm('是否删除?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			delMethods(id)
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败'
			})
		})
}
const delMethods = async (id: String | Number) => {
	await groupStandardEIDelApi({ id: id }).then(res => {
		ElMessage.success('删除成功')
		reset()
	})
}

// 退回
const auditHandle = async (status: String | Number, id: String | Number) => {
	if (status == 5) {
		ElMessageBox.prompt('', '请填写退回意见', {
			confirmButtonText: '提交',
			cancelButtonText: '取消'
		})
			.then(({ value }) => {
				tuihuiMethods(status, id, value)
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消成功'
				})
			})
	} else {
		tuihuiMethods(status, id, '')
	}
}

const tuihuiMethods = async (statusValue: String | Number, id: String | Number, message: String) => {
	var params = {
		id: id,
		applyStatus: statusValue
		// applyOpinion: message
	}
	await groupStandardEIApApi(params).then(res => {
		ElMessage.success('操作成功')
		reset()
	})
}

// 获取选择数据列操作
const shtableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const multiByIds = ref([])
const selectionChangeHandle = val => {
	multipleSelection.value = val
}
const recordByIds = () => {
	multiByIds.value = []
	if (multipleSelection.value && multipleSelection.value.length > 0) {
		multipleSelection.value.forEach(i => {
			multiByIds.value.push(i.id)
		})
	}
}
// 发布 或者 不发布 ，如果存在statusType 则提示，重新选择数据
const releaseStatus = statusType => {
	var linshiArr = [...multipleSelection.value]
	if (!linshiArr || linshiArr.length == 0) {
		return false
	}
	return linshiArr.every(item => Number(item.applyStatus) == statusType)
}
const releaseHandle = (isflag: Boolean) => {
	recordByIds()
	if (isflag) {
		if (releaseStatus(2)) {
			yesReleaseHandle()
		} else {
			ElMessage.warning({
				message: '请重新选择数据',
				duration: 500
			})
		}
	} else {
		if (releaseStatus(3)) {
			noReleaseHandle()
		} else {
			ElMessage.warning({
				message: '请重新选择数据',
				duration: 500
			})
		}
	}
}
const yesReleaseHandle = async () => {
	await groupStandardEIPuApi({ ids: multiByIds.value }).then(res => {
		ElMessage.success('发布成功')
		shtableRef.value!.clearSelection()
		reset()
	})
}
const noReleaseHandle = async () => {
	await groupStandardEICanPuApi({ ids: multiByIds.value }).then(res => {
		ElMessage.success('取消发布成功')
		shtableRef.value!.clearSelection()
		reset()
	})
}
// -----------------------------------------------------------------------------------------------
const statusList = async () => {
	await groupStandardStatusApi(state.queryForm).then(res => {
		state.applyStatusList = res.data
	})
}
const sizeChangeHandle = (val: number) => {
	state.queryForm.pageSize = val
	getDataList()
}
const currentChangeHandle = (val: number) => {
	state.queryForm.pageNum = val
	getDataList()
}

onMounted(() => {
	statusList()
	reset()
})
</script>
<style scoped>
.multi-line-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 限制显示 2 行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
</style>
